<template>
  <el-dialog :title="dialogTitlePrefix+dialogTitle" center :visible.sync="dialogFormVisible" :before-close="closeDialog"
    width="500px" :close-on-click-modal="false">
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item prop="bindContent">
        <el-input v-model="form.bindContent" :placeholder="dialogPlaceholder"
          @wheel.native.prevent="stopScrollFun($event)"></el-input>
      </el-form-item>
      <el-form-item prop="sms_code">
        <el-input ref="sms_code" class="sms_code_input" v-model.trim="form.sms_code" placeholder="请输入验证码"
          oninput="if(value.length > 6) value=value.slice(0, 6)" @keydown.native="
            (e) =>
              (e.returnValue = ['e', 'E', '-', '+'].includes(e.key)
                ? false
                : e.returnValue)
          ">
          <template slot="append">
            <div class="sendCode">
              <el-button @click="getPhoneMsg(1)" :disabled="disabledVertify" type="text">
                {{ codeInfoText }}</el-button>
            </div>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button style="width: 450px" type="primary" size="medium" @click="submitClick">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import myResumeItemsMixin from "@/mixin/myResumeItemsMixin.js";
export default {
  name: "dialogBindCode",
  mixins: [myResumeItemsMixin],
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "mobile",
    },
    dialogData: {
      ype: String,
      default: "",
    },
  },
  watch: {
    dialogData: {
      handler(newValue, oldValue) {
        //console.log("-------------------newValue:", newValue);
        if (newValue) {
          this.dialogTitlePrefix = "修改";
        } else {
          this.dialogTitlePrefix = "绑定";
        }
        this.form.bindContent = newValue;
      },
    },
    type: {
      handler(newValue, oldValue) {
        if (newValue == "mobile") {
          this.dialogTitle = "手机";
          this.dialogPlaceholder = "请输入手机号";
        } else {
          this.dialogTitle = "邮箱";
          this.dialogPlaceholder = "请输入邮箱";
        }
      },
    },
  },
  data() {
    return {
      dialogTitlePrefix: "绑定",
      codeInfoText: "发送验证码",
      disabledVertify: false,
      dialogTitle: "绑定手机",
      dialogPlaceholder: "请输入手机号", // 弹窗的placeholder
      form: {
        bindContent: "",
        sms_code: "",
      },
      rules: {
        bindContent: [
          {
            validator: (rule, value, callback) => {
              if (this.type == "mobile") {
                if (
                  !/^1([3-9]\d|4[5-9]|6[5-6]|7[0-8]|9[0-9])\d{8}$/.test(value)
                ) {
                  callback(new Error("请输入正确的手机号码"));
                } else {
                  callback();
                }
              } else {
                if (
                  !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)
                ) {
                  callback(new Error("请输入正确的邮箱"));
                } else {
                  callback();
                }
              }
            },
          },
        ],
        sms_code: [
          { required: true, trigger: "blur", message: "请输入短信验证码" },
        ],
      },
      loading: false,
    };
  },
  created() {},
  methods: {
    stopScrollFun(evt) {
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    }, // 获取短信验证码
    getPhoneMsg(smsType) {
      if (this.disabledVertify) return;
      // 验证手机号码的正则表达式
      var contentRegex = /^1([3-9]\d|4[5-9]|6[5-6]|7[0-8]|9[0-9])\d{8}$/; // 中国（11位数字，通常以1开头）
      if (this.type == "mobile") {
        contentRegex = /^1([3-9]\d|4[5-9]|6[5-6]|7[0-8]|9[0-9])\d{8}$/;
      } else {
        contentRegex = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
      }
      // 检查手机号码是否有效
      if (!contentRegex.test(this.form.bindContent)) {
        this.$message({
          type: "error",
          message:
            this.type == "mobile" ? "请输入正确的手机号" : "请输入正确的邮箱",
        });
        return; // 退出方法
      }
      const finalParams = {
        op: "job1001user_person_bind_busi",
        func: "checkCanBind",
        version: "v7.8.5",
        forName: "iphone",
        param: {
          bindContent: this.form.bindContent,
        },
      };
      //console.log("getPhoneMsg-----------finalParams:", finalParams);
      this.resumeGeneralInterface(
        finalParams,
        () => {
          this.sendBindCode();
        },
        () => {}
      );
      //   sendSms({
      //     mobile: this.form.mobile,
      //     smsType, //0注册验证码  1登录验证码  2找回密码验证码
      //     code: this.form.code,
      //     captchaId: this.captchaId,
      //   }).then((res) => {
      //     if (res.code == 200) {
      //       this.$message({
      //         type: "success",
      //         message: "发送验证码成功",
      //         duration: 3000,
      //       });
      //       this.disabledVertify = true;
      //       if (this.codeInfoText == "发送验证码") {
      //         let s = 180;
      //         this.codeInfoText = s + "s";
      //         let timer = setInterval(() => {
      //           s -= 1;
      //           this.codeInfoText = s + "s";
      //           if (s == 0) {
      //             this.codeInfoText = "发送验证码";
      //             this.disabledVertify = false;
      //             clearInterval(timer);
      //           }
      //         }, 1000);
      //       }
      //     } else {
      //       this.$message({
      //         type: "error",
      //         message: res.status_desc,
      //       });
      //       this.initCaptcha();
      //     }
      //   });
    },
    sendBindCode() {
      const finalParams = {
        op: "job1001user_person_bind_busi",
        func: "sendBindCode",
        version: "v7.8.5",
        forName: "iphone",
        param: {
          person_id: this.personId,
          type: this.type,
          content: this.form.bindContent,
          condition: {
            homename: "一览英才网",
            tradeid: "1000",
          },
        },
      };
      //console.log("getPhoneMsg-----------finalParams:", finalParams);
      this.resumeGeneralInterface(
        finalParams,
        () => {
          this.$message({
            type: "success",
            message: "发送验证码成功",
            duration: 3000,
          });
          this.disabledVertify = true;
          if (this.codeInfoText == "发送验证码") {
            let s = 60;
            this.codeInfoText = s + "s";
            let timer = setInterval(() => {
              s -= 1;
              this.codeInfoText = s + "s";
              if (s == 0) {
                this.codeInfoText = "发送验证码";
                this.disabledVertify = false;
                clearInterval(timer);
              }
            }, 1000);
          }
        },
        () => {}
      );
    },
    closeDialog() {
      this.$refs.form.resetFields();
      this.$emit("update:dialogFormVisible", false);
      this.$emit("update:dialogData", "");
      this.$emit("update:type", "mobile");
    },
    submitClick() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.submitForm();
        } else {
          //   this.$message({
          //     type: "error",
          //     message: "请检查输入项",
          //   });
        }
      });
    },
    submitForm() {
      const finalParams = {
        op: "job1001user_person_bind_busi",
        func: "checkCode",
        version: "v7.8.5",
        forName: "iphone",
        param: {
          person_id: this.personId,
          type: this.type,
          authCode: this.form.sms_code,
        },
      };
      //console.log("getPhoneMsg-----------finalParams:", finalParams);
      this.resumeGeneralInterface(
        finalParams,
        () => {
          this.$message({
            type: "success",
            message: "绑定成功",
          });
          this.$emit("changeBind", this.form.bindContent);
          this.$refs.form.resetFields();
        },
        () => {}
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.sendCode {
  display: flex;
  justify-content: center;
  width: 100px;
  color: #0b6eff;
}
</style>
